<template>
    <div class="banner_wrap">
        <van-swipe @change="onChange" :autoplay="5000" :show-indicators="false" :initial-swipe="bannerCurrent" :class="`slide-slide ${className}`">
            <van-swipe-item v-for="(item, index) in banner" :key="index" @click="onTapItem(index)" :class="`slide-slide-item ${className}`">
                <div :class="`slide-slide-img ${className}`">
                    <img :src="item.img"  />
                </div>
            </van-swipe-item>
            <!-- 自定义指示器 -->
            <template #indicator>
                <div class="indicator_wrap" v-if="banner.length > 1">
                    <i
                        :class="`indicator ${index === current ? 'active' : ''}`"
                        v-for="(item, index) in banner"
                        :key="index"
                    ></i>
                </div>
            </template>
        </van-swipe>
    </div>
</template>
<script>
import { Swipe, SwipeItem } from 'vant'
export default {
    props: {
        banner: {
            type: Array,
            default: () => {
                return []
            }
        },
        bannerCurrent: {
            type: Number,
            default: 0
        },
        className: {
            type: String,
            default: ''
        }
    },
    data () {
        return {
            current: 0
        }
    },
    methods: {
        onChange (index) {
            this.current = index
        },
        onTapItem (index) {
            this.$emit('onTapItem', index)
        }
    },
    components: {
        'van-swipe': Swipe,
        'van-swipe-item': SwipeItem
    }
}
</script>
<style lang="less" scoped>
.banner_wrap {
    position: relative;
    .slide-slide{
        position: relative;
    }
    .slide-slide-item, .slide-slide-img, .slide-slide-img {
        width: 7.5rem !important;
        &.a{
            height: 4.22rem !important;
            img{
                height: 4.22rem !important;
            }
        }
        &.b{
            height: 2.8rem !important;
            img{
                height: 2.8rem !important;
            }
        }
    }
    .indicator_wrap {
        position: absolute;
        width: 100%;
        bottom: 0.25rem;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        .indicator {
            width: 0.08rem;
            height: 0.08rem;
            border-radius: 0.04rem;
            overflow: hidden;
            background: #959595;
            margin-right: 0.09rem;
            &:last-of-type {
                margin-right: 0;
            }
            &.active {
                transition: all linear 0.05s;
                width: 0.3rem;
                background: #ffffff;
            }
        }
    }
}
</style>
